@charset "UTF-8";

@import "_helper";
@import "_base-preheat";
@import "_normalize";

.prevhot-page {
	min-height: 100%;
	background: -webkit-linear-gradient(top,#bd181a, #d21d1b,#b2151a, #790617);
	background: linear-gradient(top,#bd181a, #d21d1b,#b2151a, #790617);
	text-align: center;
	display: none;
	.nav-bottom {
		margin-top: 30px;
		padding-bottom: 20px;
		width: 100%;
		bottom: 65px;
	}
}

.content {
	position: relative;
	z-index: 2;
	.top-banner {
		width: 100%;
	}
	.user-id {
		color: #2ddfab;
		font-size: 14px;
		width: 140px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		margin: 20px auto;
		background-color: #800c15;
		border-radius: 20px;
	}
}

.light-wrap {
	position: relative;
	width: 70%;
	margin-top: -25px;
	margin-left: 15%;
	margin-bottom: 20px;
	.lt-bg {
		width: 100%;
	}
}
.logo-outer {
	position: absolute;
	top: 29.2%;
	left: 50%;
	width: 36%;
	margin-left: -18%;
	animation: rotate 8s infinite linear;
	-webkit-animation: rotate 8s infinite linear; /* Safari 和 Chrome */
}
.logo-inner {
	position: absolute;
	top: 36%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 22%;
}
.txt-1 {
	margin-bottom: 5px;
	width: 17%;
}
.txt-2 {
	margin-bottom: 5px;
	width: 50%;
	-webkit-animation-delay: .6s; 
	animation-delay: .6s;
}
.txt-3 {
	margin-bottom: 10px;
	width: 32%;
	-webkit-animation-delay: 1.2s; 
	animation-delay: 1.2s;
}
.cout-wrap {
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	-webkit-animation-delay: 2s; 
	animation-delay: 2s;
	.num {
		padding: 0 5px;
		font-size: 38px;
	}
}

.nav-list {
	margin: 0 20px;
	overflow: hidden;
}
.nav-item {
	float: left;
	width: 19%;
	margin: 0 3%;
	-webkit-transform: rotate3d(0, 1, 0, -180deg);
	transform: rotate3d(0, 1, 0, -180deg);
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	&:nth-child(1) {
		-webkit-animation-delay: 1.5s; 
		animation-delay: 1.5s;
	}
	&:nth-child(2) {
		-webkit-animation-delay: 2s; 
		animation-delay: 2s;
	}
	&:nth-child(3) {
		-webkit-animation-delay: 2.5s; 
		animation-delay: 2.5s;
	}
	&:nth-child(4) {
		-webkit-animation-delay: 3s; 
		animation-delay: 3s;
	}
	img {
		width: 100%;
	}
}
.bg {
	position: absolute;
	z-index: 0;
	top: 100px;
	width: 100%;
	img {
		width: 100%;
	}
}

@-webkit-keyframes rotate {
	from {transform: rotate(360deg);}
	to {transform: rotate(0deg);}
}

@keyframes rotate {
	from {transform: rotate(360deg);}
	to {transform: rotate(0deg);}
}


@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -180deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -180deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -180deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -180deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}